<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!--
		영역을 지정하는 태그
		<span> 눈에 보이는 변화는 없지만 영역이 지정됨 : inline태그
		<div>앞뒤로 <br>태그가 들어간 개념 : 
		<p>	<br><br> 이렇게 두번 들어간 개념
	-->
<script type="text/javascript" charset="utf-8">
	function findNode(){
	var in_1_3 = document.getElementById("in_1_3");
	var parent = in_1_3.parentNode;
	parent.style.border="5px dashed pink";
	var firstChild = in_1_3.firstChild;
	firstChild.nextSibling.style.backgroundColor="blue";
	
	var lastChild=in_1_3.lastChild;
	lastChild.previousSibling.style.border="2px solid gray";
	
	var in_2_2=document.getElementById("in_2_2");
	var children = in_2_2.children;// 자식 노드들중에서 Element(node list)을 리턴
	var childNodes = in_2_2.childNodes;//모든 자식노드들(Node List)을 리턴
		alert(children.length+" - "+childNodes.length);
	}
</script>
<div id="root_layers">
	<div id="in_1_1">in_1_1</div>
	<div id="in_1_2">in_1_2</div>
	<div id="in_1_3">in_1_3
		<p id="in_2_1">in_2_1</p>
		<div id="in_2_2">
			<span id="in_3_1">in_3_1</span>
			<span id="in_3_2">in_3_2</span>
			<a href="abc.jsp" id="in_3_3">a.jsp(in_3_3)</a>
		</div>  
</div>
</div>
<input type="button" value="클릭" onclick="findNode()"/>
</body>
</html>